<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/ZJUI.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 字体 -->
  <!-- <link rel="preload" as="style" crossorigin href="https://fontsapi.zeoseven.com/388/main/result.css"
      onload="this.rel='stylesheet'" onerror="this.href='https://fontsapi-storage.zeoseven.com/388/main/result.css'" />
    <noscript>
      <link rel="stylesheet" href="https://fontsapi.zeoseven.com/388/main/result.css" />
    </noscript> -->
  <title>ZJ-UI</title>
  <style>
    /* body {
      font-family: "Nowar Neo Sans CN UI";
      font-weight: normal;
    } */

    .box {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .loader-line {
      display: block;
      --height-of-loader: 6px;
      --loader-color: #7050E8;
      width: 130px;
      height: var(--height-of-loader);
      border-radius: 30px;
      background-color: rgba(0, 0, 0, 0.2);
      position: relative;
    }

    .loader-line::before {
      content: "";
      position: absolute;
      background: var(--loader-color);
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      border-radius: 30px;
      animation: moving 1s ease-in-out infinite;
      ;
    }

    @keyframes moving {
      50% {
        width: 100%;
      }

      100% {
        width: 0;
        right: 0;
        left: unset;
      }
    }
  </style>
</head>

<body>
  <div id="loader" class="box">
    <div class="loader-line"></div>
  </div>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script>
    document.onreadystatechange = function () {
      if (document.readyState !== "complete") {
        document.querySelector("body").style.visibility = "hidden";
        document.querySelector("#loader").style.visibility = "visible";
      } else {
        document.querySelector("#loader").style.display = "none";
        document.querySelector("body").style.visibility = "visible";
      }
    };
  </script>
</body>

</html>